<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iRock</title>
	<style type="text/css" media="screen">
		#box{
			margin-top: 100px;
			text-align: center;
		}
	</style>
</head>
<!-- <body onload = "alert('Hello, I am your pet rock.');">
	<div id="box">
		<img id="rockimg" src="rock1.jpg" alt="iRock" onclick="touchRock()">
	</div>
</body> -->
<body onload="resizeRock();greetUser();" onresize="resizeRock();">
	<div id="box">
		<img id="rockimg" src="rock1.jpg" alt="iRock">
	</div>
</body>
<script src="cookie.js"></script>
<script type="text/javascript">
           
	// window.onload = function(){
		// var body = document.querySelector('body');
                     var rockimg = document.getElementById('rockimg');
                     // rockimg.style.height = "100px";
		var userName;
		function greetUser() {
			if(navigator.cookieEnabled)
			userName = readCookie("irock_username");
			if(userName){
				alert("Hello" + userName + ", I Missed you.");
			}else{
				alert('Hello, I am your pet rock.');
			}	
		}
		// greetUser();
                     
                     function resizeRock() {
                     	rockimg.style.height = (document.body.clientHeight-100) * 0.9;
                     }
                     // resizeRock();

		function touchRock(){
			if(userName) {
				alert('I like the attention,' + userName + '. Thank you.')
			}else {
                                          userName = prompt('What is your name?' , 'Enter your name here.');
                                          if(userName) {
				          alert('It is good to meet you,' + userName + '.');
				          if(navigator.cookieEnabled)
				          writeCookie("irock_username",userName,5*365);
				      else{
				      	alert("sorry")
				      }
			          }
			}
		          document.getElementById("rockimg").src = "rock2.jpg";
			setTimeout("rockimg.src='rock1.jpg' ;" , 3000)
		}

		rockimg.onclick = function() {
			touchRock();
		}

		// onresize事件：监听浏览器大小是否发生变化，发生变化触发事件。
		// body.onresize = function() {
		// 	resizeRock();
		// }
	// }
</script>
</html>